<template>
  <div class="block infinite-list-wrapper" style="overflow:auto">
    <el-timeline class="list" v-infinite-scroll="load" infinite-scroll-disabled="disabled">
      <span v-for="(i,index) in photodata" class="list-item" :key="index">
        <el-timeline-item :timestamp="i.time" placement="top">
          <el-card>
            <el-row>
              <span v-for="(image,index) in i.images" :key="index">
                <el-col :span="4">
                  <img
                    style="width: 200px; height: 200px"
                    :src="image.uri"
                    lazy
                  />
                  <div align="center">
                    <el-dropdown>
                      <span class="el-dropdown-link">
                        {{stringcut(image.name)}}
                        <i class="el-icon-arrow-down el-icon--right"></i>
                      </span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>
                          <a :href="image.uri+'?parameter=1'">下载</a>
                        </el-dropdown-item>
                        <el-dropdown-item>分享</el-dropdown-item>
                        <el-dropdown-item>
                          <span @click="deletefile(image)">删除</span>
                        </el-dropdown-item>
                        <el-dropdown-item>
                          <span @click="refilenameclick(image)">重命名</span>
                        </el-dropdown-item>
                         <!-- <el-dropdown-item>
                          <span @click="findforld(image)">文件位置</span>
                        </el-dropdown-item> -->
                      </el-dropdown-menu>
                    </el-dropdown>
                  </div>
                </el-col>
              </span>
            </el-row>
          </el-card>
        </el-timeline-item>
      </span>
    </el-timeline>
    <el-dialog
      :title="'改为「'+reform.name+'」'"
      :visible.sync="dialogVisible2"
      width="30%"
      :modal-append-to-body="false"
    >
      <el-form ref="form" :model="reform">
        <el-form-item>
          <el-form-item label="文件名称">
            <el-input v-model="reform.name"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="txt" @click="onSubmitrename()">立即修改</el-button>
          </el-form-item>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 10,
      loading: false,
      photodata: [],
      dialogVisible2: false,
      reform: {
        name: "新名字",
        id: ""
      }
    };
  },
  computed: {
    noMore() {
      return this.count >= 20;
    },
    disabled() {
      return this.loading || this.noMore;
    }
  },
  methods: {
    load() {
      this.loading = true;
      setTimeout(() => {
        this.count += 2;
        this.loading = false;
      }, 2000);
    },
    //按日期分组
    test(data) {
      //转换时间
      function transDate(n) {
        var date = new Date(n);
        var Y = date.getFullYear() + "-";
        var M =
          (date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1) + "-";
        var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        return Y + M + D;
      }
      //处理原数组
      for (var i = 0; i < data.length; i++) {
        var timeitem = transDate(data[i].time);
        console.log(data[i].time);
        data[i].time = timeitem;
      }
      //返回所需数据格式
      const mapLoction = function(arr) {
        let newArr = [];
        arr.forEach((address, i) => {
          let index = -1;
          let alreadyExists = newArr.some((newAddress, j) => {
            if (address.time === newAddress.time) {
              index = j;
              return true;
            }
          });
          if (!alreadyExists) {
            newArr.push({
              time: address.time,
              images: [address]
            });
          } else {
            newArr[index].images.push(address);
          }
        });
        return newArr;
      };
      return mapLoction(data);
    },
    stringcut(str) {
      if(str.length<7) return str
      let sf = str.substring(0, 3);
      let sl = str.substring(str.lastIndexOf("."));
      return sf + "..." + sl;
    },
    deletefile(file) {
      this.$http
        .delete("/api_file/file/deletefile?id=" + file.id)
        .then(async res => {
          if (res.data.status == 200) {
            const { data: res } = await this.$http.get("/api_file/file/photo");
            this.photodata = this.test(res);
            this.$message.success(
              "删除:" + file.name + "成功，七天内可在回收站复原"
            );
          } else {
            return this.$message.error("删除:" + file.name + res.data.message);
          }
        });
    },
    onSubmitrename() {
      this.$http
        .post(
          "/api_file/file/rename",
          this.$qs.stringify({
            id: this.reform.id,
            name: this.reform.name
          })
        )
        .then(async res => {
          if (res.data.status == 200) {
            const { data: res } = await this.$http.get("/api_file/file/photo");
            this.photodata = this.test(res);
            this.dialogVisible2 = false;
            this.message("重命名为「" + this.reform.name + "」成功", true);
            this.form.name = "新文件夹";
          } else {
            this.dialogVisible = false;
            this.message("重命名为「" + this.reform.name + "失败", false);
            this.form.name = "新文件夹";
          }
        });
    },
    message(message, flag) {
      if (flag) {
        this.$message.success(message);
      } else {
        this.$message.error(message);
      }
    },
    refilenameclick(file) {
      this.reform.name = file.name;
      this.reform.id = file.id;
      this.dialogVisible2 = true;
    },
  },
  async created() {
    const { data: res } = await this.$http.get("/api_file/file/photo");
    this.photodata = this.test(res);
  }
};
</script>

<style lang="less" scoped>
.el-image {
  margin: 15px;
}
</style>